<!--
 * @Author: your name
 * @Date: 2021-08-05 16:55:30
 * @LastEditTime: 2021-08-10 22:28:46
 * @LastEditors: luojie
 * @Description: In User Settings Edit
 * @FilePath: /szjzglfxgl/src/packageAlpha/pages/environmentalMonitoring/detail.vue
-->
<template>
  <view class="container">
    <view class="title">采样信息</view>
    <view class="info">
      <view class="row" v-for="item in sampleInfo" :key="item.label">
        <view class="label">{{item.label}}</view>
        <view class="value" v-if="item.isDate" >{{environSample[item.prop]|formatTm2}}</view>
        <view class="value" v-else >{{environSample[item.prop]||''}}</view>
      </view>
    </view>
    <view class="title marginTop30">检测信息</view>
    <view class="info">
      <view class="row" v-for="item in testInfo" :key="item.label">
        <view class="label">{{item.label}}</view>
        <!-- <view class="value">{{item.value}}</view> -->
        <view class="value">{{environSample[item.prop]||''}}</view>
      </view>
    </view>
    <view class="title marginTop30">检测结果</view>
    <view class="table">
      <view class="table-list" v-for="(item, k) in testResult" :key="item" >
        <!-- <view class="row">
          <view class="label">采样点</view>
          <view class="value">{{item.samplePoint|formatSamplePoint}}</view>
        </view> -->
        <view class="row">
          <view class="label">采样部位</view>
          <view class="value">{{item.sampleLocation||''}}</view>
        </view>
        <view class="row">
          <view class="label">采样结果</view>
          <view class="value normal" :class="{'active': item.nucleicResult=='阳性'}"  >{{item.nucleicResult||''}}</view>
        </view>
      </view>
    </view>
    <view class="affix" v-if="fileList.length>0" >相关附件</view>
    <view class="file-box"  v-if="fileList.length>0">
      <view class="file-list" v-for="item in fileList" :key="item.fileId">
        <view class="name">{{item.fileNote}}</view>
        <view class="btn" @click="fileHandler(item)" >
          <text v-if="isFileSave[item.fileId]" class="status saved">
            已保存
          </text>
          <text v-else class="status">
            保存
          </text>
        </view>
      </view>
    </view>
    <view>
      <uni-popup ref="popup" type="bottom" background-color="#fff">
        <view class="txt-content">
          <view class="txt-title">{{txtTitle}}</view>
          {{txtContent}}
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script type='text/ecmascript-6'>
import moment from 'moment'
import { downloadFile } from "@/request/request";

export default {

  name: '',

  data () {
    return {
      environSample: {},
      sampleInfo:[
        {label:'采样点名称', prop:'sampleName'},
        {label:'采样场所',prop:'samplePlace'},
        {label:'采样日期', prop:'sampleTime'},
        {label:'采样人',prop:'samplePerson'},
        {label:'陪同人',prop:'accompanyPerson'},
        {label:'送样时间', prop:'deliveryTime'},
      ],
      testInfo:[
        {label:'送样人',prop:'deliveryPerson'},
        {label:'接样人', prop:'samplingPerson'},
        {label:'检测日期', prop:'checkTime'},
        {label:'隔离点整体检测结果',  prop:'checkResult'},
      ],
      testResult:[ ],
      fileList: [
        {name:'核酸检测报告.docx', },
        {name:'核酸检测报告.docx', },
      ],
      isFileSave: {},
      rootPath: wx.env.USER_DATA_PATH,
      txtContent: '',
      txtTitle: '',

    }
  },

  props: {}, 

  onLoad () {
    this.getData();
  },

  mounted () {

  },

  filters: {
    formatTm2(val){
      if(val){
        return moment(val).format('YYYY-MM-DD')
      }else {
        return ''
      }
    },

    formatSamplePoint(v){
      try {
        if(!v || JSON.stringify(v)==='{}') return ''
        return v||''
      } catch (error) {
        return ''
      }
    }
  },

  methods: {
    getData(){
      const _this=this;
      let environSample=uni.getStorageSync('environSample');
      let hotelName=uni.getStorageSync('hotelName');
      // 自力：采样场所=当前登录的酒店名称
      if(environSample){
        environSample.samplePlace=hotelName;
      }
      this.testResult=environSample.details;
      this.environSample=environSample;
      this.fileList= Array.isArray(environSample.files) ? environSample.files : [];

      this.fileList.forEach(ele => {
        let filePath = `${this.rootPath}/${ele.fileName}`;
        wx.getFileInfo({
          filePath,
          success() {
            _this.$set(_this.isFileSave, ele.fileId, ele.filePath);
          }
        })
      })
    },

    fileHandler(row) {
      console.log('row=====', row)
      if (this.isFileSave[row.fileId]) {
        this.previewFile(row);
      } else {
        this.downloadFile(row);
      }
    },

    // 文件预览
    previewFile(row) {
      const that=this;
      let filePath = `${this.rootPath}/${row.fileName}`;
      const _this = this;
      wx.getFileInfo({
        filePath,
        success() {
          let imgType = ['.png', '.jpg', '.jpeg'], isImage = false, isTxt=false;
          imgType.forEach(t => {
            if (filePath.indexOf(t) != -1) isImage = true;
          })
          if(filePath.indexOf('txt')!=-1) isTxt=true;
          console.log('文件预览====', filePath)
          if (isImage) {
            // 图片预览
            wx.previewImage({
              urls: [filePath],
              fail() {
                uni.showToast({
                  title: '打开图片失败',
                  icon: 'none'
                })
              }
            })
          }else if(isTxt){
            that.txtTitle='';
            that.txtContent='';
            that.txtPreviewFn(filePath, row)
          } else {
            // 文件预览
            wx.openDocument({
              filePath,
              fail() {
                uni.showToast({
                  title: '打开文档失败',
                  icon: 'none'
                })
              }
            })
          }
        },
        fail() {
          _this.isFileSave[row.fileId] = ''
        }
      })
    },

    // 二进制文件下载
    downloadFile(row) {
      let filePath = `${this.rootPath}/${row.fileName}`;
      console.log(filePath)
      const _this = this;
      wx.getFileInfo({
        filePath,
        success(res) {
          _this.$set(_this.isFileSave, row.fileId, row.filePath);
        },
        fail(err) {
          downloadFile({ url: '/files/book-download?fileId=' + row.fileId }).then(data => {
            console.log('file', data)
            const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
            fs.writeFile({ // 写文件
              filePath,
              data: data,
              encoding: "binary", //二进制流文件必须是 binary
              success(res){
                console.log('write success')
                _this.$set(_this.isFileSave, row.fileId, row.filePath);
              },
              fail(err) {
                console.log(err)
              }
            });
          })
        }
      })
    },

    txtPreviewFn(filePath, row){
      const that=this;
      const fs = wx.getFileSystemManager()
      fs.readFile({
        filePath: filePath,
        encoding: 'utf8',
        position: 0,
        success(res) {
          console.log('TXT文件预览显示结果======', res.data)
          that.txtTitle=row.fileNote;
          that.txtContent=res.data;
          that.$refs.popup.open("bottom");
        },
        fail(err) {
          console.error('TXT文件预览显示fail======', err)
          uni.showToast({
            title: '打开文档失败',
            icon: 'none'
          })
        }
      })

    },
    
  },

  components: { },

  watch: {}

  }
</script>

<style scoped lang='scss'>
.container {
  // padding: 0 16px;
  background-color: #f9f9f9;
  overflow-x: hidden;
  .title {
    line-height: 98rpx;
    width: 750px;
    height: 98rpx;
    background: #FFFFFF;
    opacity: 1;
    padding: 0 32rpx;
    border-bottom: 1rpx solid #E9E9E9;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #000000;
  }
  .info {
    padding: 0 32rpx;
    font-size: 28rpx;
    background-color: #fff;
    .row {
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        flex-basis: 150px;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .value {
        flex: 1;
        text-align: right;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 48px;
        color: #666666;
      }
    }
    
  }
  .file-box {
    padding: 0 32rpx;
    font-size: 28rpx;
    .file-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 138rpx;
      background: #FFFFFF;
      box-shadow: 0px 8rpx 20rpx #E5E5E5;
      opacity: 1;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      .name {
        flex: 1;
        padding-left: 30rpx;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
      }
      .btn {
        flex-basis: 72px;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #2C9AF1;
        text-align: right;
        padding-right: 30rpx;
      }
    }
  }
  .marginTop30{
    margin-top: 30rpx;
  }
  .table {
    // border: 1px solid #eaeaea;
    // margin: 6px 0;
    // border-radius: 6px;
    // font-size: 28rpx;
    background-color: #fff;
    .table-list {
      border-bottom: 1px solid #F6F6F6;
      &:last-child {
        border: none;
      }
      .row {
        min-height: 96rpx;
        display: flex;
        align-items: center;
        padding: 0 32rpx;
        .label {
          flex-basis: 90px;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
        .value {
          flex: 1;
          text-align: right;
        }
        .normal {
          color: #13C563;
        }
        .active {
          color: #F15B53;
        }
      }
    }
  }
  .affix {
    height: 98rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 98rpx;
    padding-left: 32rpx;
    color: #666666;
  }
  .txt-content {
    height: 80vh;
    overflow-y: auto;
    font-family: PingFang SC;
    padding: 32rpx;
    font-size: 30rpx;
    word-break: break-word;
    .txt-title {
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}
</style>